<template>
	<gui-page
		:customHeader="true"
		headerStyle="background-image: linear-gradient(to right,    #f15525, #e15324);"
		statusBarStyle="background-image: linear-gradient(to right,    #f15525, #e15324);"
	>
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<gui-header-leading :onlyBack="true" buttonStyle="color:#ffffff;"></gui-header-leading>
				<view class="gui-flex1 gui-text-center" style="margin-right: 40rpx;"><text class="gui-h4 gui-ellipsis gui-primary-color gui-color-white">提现</text></view>
				<!-- <gui-mp-menu-spacing></gui-mp-menu-spacing> -->
			</view>
		</view>
		<view slot="gBody" class="z-body">
			<view class="z-top-h">
				<view class="gui-margin z-top">
					<view class="gui-padding z-warning">系统会自动更新昨日收益，可能会有延迟。</view>
					<view class="z-num">{{ user.money }}</view>
					<view class="z-title">当前余额(元)</view>
				</view>
			</view>
			<view class="gui-bg-white z-list">
				<form @submit="submit">
					<view class="gui-margin">
						<view class="" style="font-size: 26rpx;">提现金额</view>
						<view class="gui-form-body gui-flex z-input">
							<text class="z-input-icon">￥</text>
							<input type="number" class="gui-form-input z-input-h" v-model="money" name="money" placeholder="" />
						</view>
						<view class="gui-form-item gui-border-b">
							<text class="gui-form-label">姓名</text>
							<view class="gui-form-body"><input type="text" class="gui-form-input" v-model="name" name="name" placeholder="请输入姓名" /></view>
						</view>
						<view class="gui-form-item gui-border-b">
							<text class="gui-form-label">联系电话</text>
							<view class="gui-form-body"><input type="phone" class="gui-form-input" v-model="phone" name="phone" placeholder="请输入手机号" /></view>
						</view>
						<view class="gui-form-item gui-border-b">
							<text class="gui-form-label">登录密码</text>
							<view class="gui-form-body">
								<input type="password" class="gui-form-input" v-if="isPwd" v-model="password" name="password" placeholder="请输入密码" />
								<input type="text" class="gui-form-input" v-if="!isPwd" :disabled="true" v-model="password" name="password" placeholder="请输入密码" />
							</view>
							<text class="gui-form-icon gui-icons gui-text-center" @click="changePwdType" :style="{ color: isPwd ? '#999999' : '#008AFF' }">&#xe609;</text>
						</view>
						
						<view class="gui-color-red" style="font-size: 30rpx;margin-top: 20rpx;">注意：每月15日10:00-18:00方可提现，提现一般3~5天内账</view>
						<view class="z-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-end">
							<button type="default" class="gui-button gui-bg-orange gui-noborder button" style="width:200rpx; background-color:#ff5500;" formType="submit">
								<text class="gui-icons gui-color-white gui-button-text">提现</text>
							</button>
						</view>
					</view>
				</form>
			</view>
		</view>
	</gui-page>
</template>
<script>
var graceChecker = require('@/lizhili/js/checker.js');
export default {
	data() {
		return {
			money: 0.0,
			name: '',
			password: '',
			phone: '',
			isPwd: true,
			user: {}
		};
	},
	onShow: function() {
		
		uni.common.post(
			uni.common.apiServer + 'my',
			{
				type: 'get_my_info'
			},
			false,
			res => {
				if (res.code == 1) {
					this.user = res.data;
					//先授权，后购买
					if(!res.data.openid_wx){
						uni.showLoading({
							title:'获取用户信息中...'
						})
						//获取openid
						let that = this;
						uni.getUserProfile({
							desc: '完善信息',
							success: function(infoRes) {
								// console.log(infoRes);
								uni.login({
									provider: 'weixin',
									success: function(loginRes) {
										uni.common.post(
											uni.common.apiServer + 'index',
											{
												type: 'get_wx_openid',
												rawData: infoRes.rawData,
												code: loginRes.code,
											},
											true,
											res => {
												if (res.code == 1) {
													uni.showToast({
														title: '获取资料成功',
														icon: 'none'
													});	
												} else {
													uni.showToast({
														title: '获取失败',
														icon: 'none'
													});
												}
												uni.hideLoading()
											},
											e => {
												uni.hideLoading()
												console.log(e);
											}
										);
									},
									fail() {
										uni.hideLoading()
										uni.showToast({
											icon: 'none',
											title: '获取失败'
										});
									}
								});
							},
							fail() {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '获取失败'
								});
							}
						});
						return false
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '尚未登陆，请登陆后购买'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
		
		
	},
	
	
	
	methods: {
		submit: function(e) {
			//提现时间
			let d = new Date().getDate();
			if (d != 15) {
				uni.showToast({
					icon: 'none',
					title: '每月15日进行提现！'
				});
				return false;
			}
			if (this.money > this.user.money) {
				uni.showToast({
					title: '账户余额不足!',
					icon: 'none'
				});
				return false;
			}
			var rule = [
				{ name: 'money', checkType: 'between', checkRule: '100,200', errorMsg: '由于微信限制，提现金额100-200' },
				{ name: 'name', checkType: 'string', checkRule: '1,10', errorMsg: '请正确填写姓名' },
				{ name: 'password', checkType: 'string', checkRule: '6,', errorMsg: '请输入正确密码' },
				{ name: 'phone', checkType: 'phone', checkRule: '', errorMsg: '手机号码错误' }
			];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				uni.common.post(
					uni.common.apiServer + 'my',
					{
						type: 'update_my_ti',
						money:formData.money,
						name:formData.name,
						password:formData.password,
						phone:formData.phone
					},
					false,
					res => {
						if (res.code == 1) {
							uni.common.back(res.message)
						} else {
							uni.common.msg(res.message)
						}
					},
					e => {
						console.log(e);
					}
				);
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
			}
		},
		changePwdType: function() {
			this.isPwd = !this.isPwd;
		}
	}
};
</script>
<style>
.z-body {
	background-image: linear-gradient(to right, #f15525, #e15324);
}
.z-top-h {
	min-height: 22vh;
}
.z-top {
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	text-align: center;
}
.z-title {
	color: #ffc714;
	font-size: 30rpx;
}
.z-warning {
	color: #ffc714;
	line-height: 2.2;
	font-size: 30rpx;
}
.z-left {
	width: 480rpx;
	margin-right: 30rpx;
}
.z-num {
	font-size: 72rpx;
	color: #fff;
}
.z-right {
	width: 180rpx;
	text-align: center;
	padding-top: 30rpx;
}
.z-right text {
	color: #ffc714;
	background-color: #fff;
	padding: 15rpx 30rpx;
	font-size: 34rpx;
	border-radius: 8rpx;
}
.z-list {
	padding-top: 30rpx;
	border-radius: 30rpx 30rpx 0 0;
}
.z-input {
	margin-top: 30rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #d2d2d3;
	width: 100%;
	margin-left: 0;
}
.z-input-icon {
	font-size: 64rpx;
}
.z-input-h {
	width: 500rpx;
	font-size: 48rpx;
}
.z-margin-top-large {
	margin-top: 180rpx;
}
</style>
